<template>
  <div class="submit">
    <div class="sub-top">
      <van-nav-bar title="填写订单" left-text left-arrow @click-left="$router.push({name:'Cart'})" />
      <div class="address">
        <p>收货人</p>
        <p>
          <span>{{lastaddress.receiver+''+lastaddress.mobile}}</span>
          <span>{{lastaddress.regions+''+lastaddress.address}}</span>
        </p>
        <p>
          <van-icon @click="$router.push({name:'AllDelivery'})" name="arrow" />
        </p>
      </div>
      <van-cell :value="orderuser+' '+orderphone" is-link to="/submit/orderuser">
        <template slot="title">
          <span class="custom-title">订购人信息</span>
        </template>
      </van-cell>
      <van-cell :value="ordermessage" is-link to="/submit/message">
        <template slot="title">
          <span class="custom-title">贺卡留言</span>
        </template>
      </van-cell>
      <van-cell :value="date" @click="showPopup" is-link>
        <template slot="title">
          <span class="custom-title">送达日期</span>
        </template>
      </van-cell>
      <van-popup v-model="show" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          @confirm="confirmPicker"
          @cancel="cancelPicker"
        />
      </van-popup>

      <div class="space"></div>
      <van-cell title="备注/优惠券/权益卡/发票" is-link arrow-direction="down" value />
    </div>
    <div class="allorder">
      <div class="order2" v-for="item in arr" :key="item.product._id">
        <div>
          <img :src="item.product.coverImgUrl" alt />
        </div>
        <div>
          <p>{{item.product.desc}}</p>
          <p>数量X{{item.quantity}}</p>
        </div>
        <span>{{item.quantity*item.product.product_price}}</span>
      </div>
      <div class="totalprice">
        <p>商品总金额</p>
        <p>￥{{total}}</p>
      </div>
    </div>
    <van-submit-bar :price="total*100" button-text="去结算" @submit="$router.push({name:'Pay'})" />
  </div>
</template>
<script>
import { mapState, mapMutations, mapAction } from "vuex";
export default {
  data() {
    return {
      total: 0,
      date: "选择日期",
      show: false,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2019, 11, 1),
      arr:[]
    };
  },
  created() {
    console.log(this.lastaddress);
    let arr=JSON.parse(localStorage.getItem('checkedgoods'))
    this.arr=arr
    this.total = this.arr.reduce((val, item, index) => {
      return val + item.quantity * item.product.product_price;
    }, 0);
    console.log(this.total);
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    confirmPicker(value) {
      var d = new Date(value);
      var date =
        d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
      console.log(date);
      this.date = date;
      this.show = false;
    },
    cancelPicker() {
      this.show = false;
    }
  },
  computed: { 
    ...mapState("product", [
      "checkedgoods",
      "orderuser",
      "orderphone",
      "ordermessage",
      "lastaddress"
    ])
  }
};
</script>
<style scoped>
@import "../css/submit.css";
</style>